<template>
  <div class='login'>
    <com-header
      :right-icon='icon'
      :_handleRight='_handleFinish'
      :right-text="rightText">
      <div class="titleText textColor" slot='title'></div>
    </com-header>
    <div class="loginBox">
      <div class="topText">{{topText}}</div>
      <div class="phoneNum" v-if="loginId == 0">
        <div class="left" @click='_handleSelectCode'>+{{eareCode}}</div>
        <input class='phoneNumer' type="number" placeholder='Phone number' v-model='phoneNumber1'>
      </div>

      <div class="captcha" v-if="loginId == 1">
        <input-code v-model="captcha"/>
        <div class="errorShow" v-show='isError'>Error</div>
      </div>

      <div class="phoneNum phoneNum1" v-if="loginId == 2">
        <input
          class='nickname'
          type="text"
          placeholder='Enter Your Nickname'
          maxlength='14'
          v-model='nickName'>
      </div>

      <upload
        v-if="loginId == 3"
        :uploadType="`head`"
      ></upload>

      <ripple v-if="loginId == 4"/>

      <div
        class="next"
        :class="bottonColor? 'activeNext':''"
        v-show='nextText'
        @click='_handleNext'>{{nextText}}
      </div>

      <div class="resend" v-if="loginId == 1">
        <div class="Countdown" v-show='isCountdown'>
          The security code can be resent after <span>{{countdown}}</span> s
        </div>
        <div class="resend newResend" @click='_renderGetCode' v-show='!isCountdown'>Resend</div>
        <div class="resend newResend" @click='() => _renderGetCode(2)' v-show='!isCountdown'>Try our Voice
          Verification
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import ComHeader from '../../components/common/Header'
  import InputCode from '../../components/login/InputCode'
  import Upload from '../../components/login/Upload'
  import Ripple from '../../components/login/Ripple'
  import { mapGetters, mapActions } from 'Vuex'
  import api from '../../plugins/api'
  import { Toast } from 'mint-ui'

  const Cookie = process.browser ? require('js-cookie') : undefined

  export default {
    layout: 'other',
    components: { ComHeader, InputCode, Upload, Ripple },
    asyncData(app) {

      return {}
    },
    data() {
      return {
        title: 'LOG IN',
        topText: 'Your phone number will only be used for your login',
        nextText: 'GET SECURITY CODE',
        phoneNumber1: '',
        bottonColor: false,
        captcha: '',
        isError: false,
        countdown: 60,
        isCountdown: true,
        nickName: '',
        rightText: '',
        ripplesTagId: '',
        icon: 'icon'
      }
    },
    // head: {
    //  获取ip
    //   script: [
    //     { src: 'http://pv.sohu.com/cityjson?ie=utf-8' }
    //   ]
    // },
    created() {

      switch (this.loginId) {
        case '1':
          this.title = 'ENTER SECURITY CODE'
          this.topText = `Please enter the security code from +${this.eareCode} ${this.phoneNumber}`
          this.nextText = 'NEXT'
          break
        case '2':
          this.title = 'Edit your nickname'
          this.topText = ''
          this.nextText = 'NEXT'
          break
        case '3':
          this.title = 'CHOOSE YOUR AVATAR'
          this.topText = ''
          this.nextText = null
          break
        case '4':
          this.title = ''
          this.topText = ''
          this.nextText = null
          this.icon = 'rightF'
          break
        case '5':
          break
        case '6':
          break
      }

    },
    mounted() {
      //入股手动选择了区号 就不适用后端的
      if (!this.eareCode && this.loginId == 0) {
        this._getEarecode()
      }
      if (this.loginId == 1) {
        this._renderCountdown(this.countdown)
      }
    },
    computed: {
      ...mapGetters([
        'eareCode',
        'phoneNumber',
        'rippleData'
      ]),
      loginId() {
        return this.$route.params.login
      }
    },
    methods: {
      ...mapActions({
        // _handleAdd: 'ADDCOUNT',
        // _handleSub: 'SUBCOUNT'
      }),

      // finish 上传选中的ripple
      async _handleFinish() {
        let rippleId = ''
        this.rippleData.forEach((item) => {
          rippleId = rippleId + item.tag_id + ','
        })
        const parmas = {
          sid: Cookie.get('sid'),
          tag_id: rippleId
        }
        let res = await api.setinterestTag(parmas)
        console.log(res)
        if (res.status == 0) {
          this.$router.push({ path: '/' })
        } else {
          Toast(res.info)
        }
      },


      // 倒计时
      _renderCountdown(tiem) {
        if (this.countdown == 0) {
          this.isCountdown = false
        } else {
          this.countdown--
          setTimeout(() => {
            this._renderCountdown(this.countdown)
          }, 1000)
        }

      },

      //手动选择区号Z
      _handleSelectCode() {
        this.$router.push({ path: '/login/code' })
      },

      //后端获取区号
      async _getEarecode(code) {
        let eare = await api.getCodeByIp({ ip_address: code })
        this.$store.commit('_setEareCode', eare.data.area_code)
      },

      //获取验证码
      async _renderGetCode(type) {
        const parmas = {
          type: type || 1,
          countryCode: this.eareCode,
          mobile: this.phoneNumber1 * 1
        }
        let res = await api.getCode(parmas)
        if (res.status == 0) {
          this.$router.push({ path: '/login/1' })
        } else {
          Toast(res.info)
        }
      },

      //点击下一步
      async _handleNext() {
        if (this.loginId == 0) {
          Cookie.set('phoneNumber1', this.phoneNumber1)
          this.$store.commit('_setPhoneNumber', this.phoneNumber1)
          this._renderGetCode()
        } else if (this.loginId == 1) {

          const parmas = {
            //TODO 改信息
            code: this.captcha,
            countryCode: '86',
            mobile: '1001'
            // countryCode: this.eareCode,
            // mobile: this.phoneNumber
          }
          let res = await api.getSmslogin(parmas)

          if (res.status == 0) {
            this.$store.commit('_setSid', res.data.sid)
            this.$store.commit('_setUser', res.data.user.uid)
            Cookie.set('sid', res.data.sid)
            Cookie.set('user', res.data.user.uid)
            if (res.data.is_new) {
              this.$router.push({ path: '/login/2' })
            } else {
              this.$router.push({ path: '/' })
            }

          } else {
            this.isError = true
            Toast(res.info)
          }
        } else if (this.loginId == 2) {
          const parmas = {
            sid: Cookie.get('sid'),
            nickname: this.nickName
          }
          const res = await api.setChangeInfo(parmas)
          // console.log(res)
          if (res.status == 0) {
            // 本来跳到第三步上传头像 现在省略 直接到第四步选择ripple
            // this.$router.push({ path: '/login/3' })
            this.$router.push({ path: '/login/3' })
          } else {
            Toast(res.info)
          }
        }
      }
    },
    watch: {
      phoneNumber1: function(cur, old) {
        if (cur) {
          this.bottonColor = true
        } else {
          this.bottonColor = false
        }
      },
      captcha: function(cur, old) {
        // console.log(cur)
        if (cur) {
          this.bottonColor = true
        } else {
          this.bottonColor = false
        }
      },
      nickName: function(cur, old) {
        if (cur.length > 3) {
          this.bottonColor = true
        } else {
          this.bottonColor = false
        }
      }
    }
  }
</script>
<style scoped lang="scss">
  div {
    height: auto;
  }

  .login {
    width: 100%;
    height: 100%;
    background: #ffffff;

    .loginBox {
      width: 100%;
      height: calc(100% - 88px);
      display: flex;
      color: #4A4A4A;
      font-size: 30px;
      flex-direction: column;
      align-items: center;
      overflow: hidden;

      .topText {
        width: 600px;
        text-align: center;
        line-height: 42px;
        padding-top: 40px;
      }

      .phoneNum {
        width: 600px;
        height: 100px;
        box-shadow: 0px 17px 40px -9px rgba(31, 204, 192, 0.3);
        border-radius: 58px;
        border: 2px solid rgba(31, 204, 192, 1);
        margin: 80px 0 97px 0;
        display: flex;

        &.phoneNum1 {
          width: 440px;
        }

        .left {
          font-size: 36px;
          width: 180px;
          height: 100%;
          text-align: center;
          line-height: 100px;
          position: relative;

          &:before {
            position: absolute;
            width: 20px;
            height: 20px;
            content: '';
            top: 50%;
            right: 18px;
            margin-top: -10px;
            background: url("../../assets/images/8.png") no-repeat center;
            -webkit-background-size: 100%;
            background-size: 100%;
            transform: rotate(90deg);
          }
        }

        .phoneNumer {
          flex-grow: 1;
          border: none;
          border-radius: 0 58px 58px 0;
        }

        .nickname {
          width: 100%;
          border: none;
          border-radius: 58px;
          text-align: center;
        }
      }

      .captcha {
        width: 600px;
        height: 100px;
        padding: 0 63px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 80px 0 97px 0;
        position: relative;

        .captchaInput {
          width: 96px;
          height: 100px;
          background: rgba(236, 246, 245, 1);
          border-radius: 8px;
          border: none;
          text-align: center;
          font-size: 40px;
          line-height: 100px;
        }

        .errorShow {
          position: absolute;
          bottom: -50px;
          right: 73px;
          font-size: 24px;
          color: #FF233E;
        }
      }

      .next {
        width: 600px;
        height: 100px;
        background: rgba(212, 215, 215, 1);
        box-shadow: 0px 17px 40px -9px rgba(174, 174, 174, 0.3);
        border-radius: 58px;
        line-height: 100px;
        text-align: center;
        margin-bottom: 54px;

        &.activeNext {
          background: rgba(31, 204, 192, 1);
        }
      }

      .resend {
        width: 600px;
        font-size: 24px;
        color: #9B9B9B;
        text-align: center;
        line-height: 40px;
        margin-bottom: 20px;

        span {
          color: #FF233E;
        }

        &.newResend {
          color: #1FCCC0;
        }
      }
    }
  }
</style>
